<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FileReader类型</title>
</head>

<body>
    <input type="file" id="files-list" multiple> 
    <img>
    <script>
        let filesList = document.getElementById("files-list");
        let img = document.getElementsByTagName("img").item(0)
        // 常规读取文件并输出
        // filesList.addEventListener("change", (event) => {
        //     let files = event.target.files,
        //         i = 0,
        //         len = files.length;

        //     while (i < len) {
        //         const f = files[i];
        //         console.log(`${f.name}  (${f.type},${f.size} bytes )`);
        //         i++
        //     }
        // })

        // 读取图片之后展示（终于解决了选择图片不能展示的问题了oh year）
        filesList.addEventListener("change", (event) => {
            // 初始化reader对象
            let reader = new FileReader();
            let files = event.target.files

            reader.readAsDataURL(files[0])

            // 是个异步函数，但是可以通过给reader绑定load事件来进行显示图片的操作
            // 除了load事件还有error事件，progress事件是比较常用的
            reader.onload = ()=>{
                img.src = reader.result;
            }
        })
    </script>
</body>

</html>